<template>
	<view class="flex flex-col flex-center align-center" style="width: 100%;">
		<view style="width: 100%;">
			<slot :tableList="list" v-if="list.length>0" style="width: 100%;"></slot>
		</view>
		<view class="font-12 font-gray flex flex-center align-center m-t-l p-t-l" style="width: 100%;">
			<u-loading-icon text="加载中" textSize="12" :size="12" v-if="loading"></u-loading-icon>
			<text class="m-l-l m-r-l" v-if="list.length>0 &&!loading && (params.totalPage === params.currentPage)">-已经到底啦-</text>
			<div v-if="params.totalPage!==null && list.length ===0">
				<div>暂无数据</div>
				<!-- <image src="../../../static/image/common/empty.svg" style="width: 150px;height: 100px;">
				</image>
				<div>还没活动，快去玩把</div> -->
			</div>
		</view>
	</view>
</template>

<script setup>
	import {
		getCurrentInstance,
		ref,
		defineProps,
		onMounted
	}
	from 'vue';
	import * as apiList from '../utils/api';
	const {
		proxy
	} = getCurrentInstance();
	const props = defineProps({
		searchForm: {
			type: Object,
			default: () => {
				return {}
			}
		},
		api: {
			type: String,
			default: ''
		}
	})
	const loading = ref(false);
	const list = ref([]);
	const params = ref({
		pageSize: 5,
		currentPage: 1,
		totalPage: null,
	})
	const search = (flag) => {
		if (flag) {
			params.value = {
				pageSize: 5,
				currentPage: 1,
				totalPage: null,
			}
			list.value = [];
		}
		loading.value = true;
		apiList[props.api]({
			...props.searchForm,
			...params.value
		}).then((res) => {
			if (res.code === 200) {
				let {
					list: listres,
					totalPage,
				} = res.data;
				loading.value = false;
				list.value = [...list.value, ...listres];
				params.value.totalPage = totalPage;
			}
			loading.value = false;
		}).catch(() => {
			loading.value = false;
		})
	}
	onMounted(() => {
		search();
		uni.$on('onReachBottom', (flag) => {
			if (params.value.totalPage !== null && params.value.currentPage >= params.value.totalPage) {
				return;
			}
			params.value.currentPage++;
			search();
		});
	});
</script>

<style lang="less" scoped>

</style>